<template>
  <div id="goodslist">
    <page-title>
      <span slot="pageName">项目分类</span>
    </page-title>
    <div class="box">
      <el-button class="uploadGoods" type="primary" round @click="AddGoods">添加分类</el-button>
    </div>
    <!-- 表格 -->
    <div class="table">
          <el-table
            :data="tableData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            border
            
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                  <el-table-column
                        prop="id"
                        label="分类ID"
                        align="center"
                        sortable
                        width="100px"
                        >
                  </el-table-column>
                  <el-table-column
                        prop="name"
                        align="center"
                        label="分类名称"
                        sortable
                        >
                  </el-table-column>
                  <el-table-column
                        prop="navpic"
                        align="center"
                        label="分类图标">
                        <template slot-scope="scope">
                              <img :src="scope.row.navpic" alt="" width="30" height="30">
                        </template>
                  </el-table-column>
                  <el-table-column
                        prop="status"
                        align="center"
                        label="分类状态">
                        <template slot-scope="scope">
                              <el-button size="mini" :type="scope.row.status == 1 ? 'success' : 'danger' " @click="GoodsDisplay(scope.row.id)">{{ scope.row.status == 1 ? "显示" : "隐藏"}}</el-button>
                        </template>
                  </el-table-column>
                  <el-table-column
                        prop="sort"
                        align="center"
                        label="分类排序">
                  </el-table-column>
                  <el-table-column
                        prop="address"
                        align="center"
                        label="操作">
                        <template slot-scope="scope">
                              <el-button type="primary" @click="editNav( scope.row )">编辑</el-button>
                        </template>
                  </el-table-column>
            </el-table>
    </div>

    
    <div class="dialog">
      <goods-dialog :DialogData="DialogData" :FormData="FormData" :selectData="selectData" @update="getGoodslist"></goods-dialog>
    </div>
  </div>
</template>

<script>
import PageTitle from "@/components/PageTitle";
import GoodsDialog from "@/components/Goods/AddGoods";
export default {
  data() {
    return {
      tableData: [],
      DialogData: {
        title: "",
        show: false,
        add: false
      },
      FormData: {},
      selectData: [],
    };
  },

  components: {
    PageTitle,
    GoodsDialog
  },
  computed: {
    token() {
      return localStorage.miniToken;
    }
  },
  mounted () {
    this.getItemlist()
    this.getGoodslist()
  },
  methods: {
    // 编辑商品
    goodsEdit(row) {
      console.log(1);
      
      this.DialogData = {
        title: "编辑分类",
        show: true,
        add: false
      };
      this.FormData = {
            id: row.id,
            title: row.title,
            shopimage: row.shopimage,
            score: row.score,
            money: row.money,
            explain: row.explain
      }
      
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    // 添加商品
    AddGoods() {
      this.DialogData = {
        title: "添加分类",
        show: true,
        add: true
      };
      this.FormData = {
            pid: 0,
            name: "",
            navpic: "",
            describe: "",
      }
    },

    // 获取分类选项
    async getItemlist() {
      let token = localStorage.miniToken
      let res = await this.$axios.post("/admin/website/navshow", { token: this.token })
      let data = res.data.data
      //console.log(data)
      this.tableData = data 
      
      
    },
   // 获取添加或修改分类中的select数据
    async getGoodslist() {
      let token = localStorage.miniToken
      let res = await this.$axios.post("/admin/website/primary", { token: this.token })
      let data = res.data.data
      //this.tableData = data
      this.selectData = data
      this.selectData.unshift({
            id: 0,
            name: "一级分类"
      })
     // console.log(data)
      
    },

    // 分类是否显示
    async GoodsDisplay( id ) {
      console.log(this.token, id);
      
      let res = await this.$axios.post("/admin/website/navdisplay", {
        token: this.token,
        id
      })
      let code = res.data.code
      if (code == 200 || code || 202) {
        this.$message.success("更新成功")
        this.getItemlist()
      }
    },

//     编辑分类
      editNav( row ) {
        this.DialogData = {
            title: "编辑分类",
            show: true,
            add: false,
            edit: true
        };
            this.FormData = {
                  pid: row.pid,
                  id: row.id,
                  name: row.name,
                  navpic: row.navpic,
                  describe: row.describe,
                  type: "",
            }
      },
  }
};
</script>

<style lang="scss" scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.box {
  width: 100%;
  text-align: left;
  padding-bottom: 30px;
}
.goodsImg {
  width: 100px;
  height: 30px;
}
.popImg {
  max-width: 400px;
  height: auto;
}
.goodsdesc {
  width: 100px;
  height: 25px;
}
.uploadGoods {
  float: right;
  margin: 10px 20px;
}
</style>